<template>
	<view class="change_phoneN">
		<!-- 顶部分隔 -->
		<view class="top_line"></view>
		<!-- 旧手机号 -->
		<view class="oldPhone">
			<text>旧手机号</text>
			<span>188****8888</span>
		</view>
		<!-- 新手机号 -->
		<view class="newPhone">
			<text>新手机号</text>
			<input type="text" placeholder="请输入新手机号码" />
		</view>
		<!-- 获取验证码 -->
		<view class="getNumber">
			<text>手机验证</text>
			<input type="text" placeholder="请输入验证码" />
			<view class="wrap">
					<u-toast ref="uToast" color="rgb(222,222,222)"></u-toast>
					<u-code :seconds="seconds" @end="end" @start="start" ref="uCode" 
					@change="codeChange"></u-code>
					<u-button @tap="getCode">{{tips}}</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tips: '',
				// refCode: null,
				seconds: 30,
			}
		},
		methods: {
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if(this.$refs.uCode.canGetCode) {
				// 模拟向后端请求验证码
					uni.showLoading({
					title: '正在获取验证码'
					})
				    setTimeout(() => {
					    uni.hideLoading();
					    // 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 2000);
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			end() {
				uni.$u.toast('倒计时结束');
			},
			start() {
				uni.$u.toast('倒计时开始');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.change_phoneN{
		width: 100%;
		height: 1500rpx;
		background: rgb(249,249,249);
		.top_line{
			width: 100%;
			height: 40rpx;
			background: rgb(249,249,249);
		}
		.oldPhone{
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			background: rgb(255,255,255);
			display: flex;
			justify-content: flex-start;
			text{
				font-family: PingFangSC;
				font-weight: 400;
				font-size: 32rpx;
				color: rgb(28, 34, 42);
				margin-left: 40rpx;
			}
			span{
				font-family: PingFangSC;
				font-weight: 400;
				font-size: 32rpx;
				color: rgba(153, 153, 153,1);
				margin-left: 380rpx;
			}
		}
		
		// 新手机号码
		.newPhone{
			width: 100%;
			margin-top: 20rpx;
			background: rgb(255,255,255);
			height: 100rpx;
			line-height: 100rpx;
			display: flex;
			margin-bottom: 2rpx solid rgb(249,249,249);
			justify-content: flex-start;
			text{
				font-family: PingFangSC;
				font-weight: 400;
				font-size: 32rpx;
				color: rgb(28, 34, 42);
				margin-left: 40rpx;
			}
			input{
				width: 40%;
				text-align: right;
				font-family: PingFangSC;
				font-weight: 400;
				font-size: 32rpx;
				color: rgb(28, 34, 42);
				margin-left: 260rpx;
				margin-top: 30rpx;
			}
		}
		
		// 获取验证码
		.getNumber{
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			background: rgb(255,255,255);
			display: flex;
			justify-content: space-around;
			text{
				font-family: PingFangSC;
				font-weight: 400;
				font-size: 32rpx;
				color: rgb(28, 34, 42);
				margin-left: 40rpx;
			}
			input{
				width: 200rpx;
				margin-top: 20rpx;
				font-size: 32rpx;
				font-weight: 400;
				font-family: PingFangSC;
				color: rgb(28, 34, 42);
				margin: 30rpx 10rpx 20rpx auto;
				text-align: right;
			}
			.wrap {
				width: 30%;
				height: 60rpx;
				margin-top: 10rpx;
				margin-right: 30rpx;
			}
		}
	}
</style>
